<!DOCTYPE html>
<html class="loading" lang="zh-CN" data-textdirection="ltr">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui" />
  <meta name="author" content="PIXINVENT" />
  <title>666后台管理系统</title>
  <script src="app-assets/js/Dream.js"></script>
  <script src="app-assets/js/Http.js"></script>
  <link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css" />
  <link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css" />
  <link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css" />
  <style>
    .content-header {
      display: flex;
      justify-content: space-between;
    }

    .card-deck {
      display: flex;
      flex-wrap: wrap;
    }

    /* 新增的购物车按钮固定样式 */
    .cart-button-fixed {
      position: fixed;
      right: 20px;
      top: 20px;
      z-index: 1000;
    }
  </style>
</head>

<body>
  <div class="content-wrapper">
    <div class="content-header">
      <div class="content-header-left mb-2">
        <h3 class="content-header-title mb-0">商品列表</h3>
      </div>
      <div>
        <button type="button" class="btn btn-danger cart-button-fixed" onclick="showCart()">
          购物车 <span class="badge badge-light" id="num">0</span>
        </button>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-3">
        <div class="card">
          <ul class="list-group list-group-flush" id="supplierNameVal">
            <!-- <li class="list-group-item">供应商1</li>
            <li class="list-group-item">供应商2</li>
            <li class="list-group-item">供应商3</li>
            <li class="list-group-item">供应商4</li> -->
          </ul>
        </div>
      </div>
      <div class="col-sm-9">
        <div class="card">
          <div class="card-content">
            <div class="card-body">
              <div class="searchbox">
                <form class="form-inline">
                  <div class="form-group">
                    <input type="text" class="form-control" placeholder="请填写商品名称" id="productNameVal" />
                  </div>

                  <div class="form-group">
                    <button type="button" class="btn btn-primary" id="productNameSearch">
                      查询
                    </button>
                  </div>
                </form>
              </div>
              <div class="card-columns" id="cards">
                <!--填充内容-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>


  <script src="app-assets/js/vendors.min.js" type="text/javascript"></script>
  <script src="app-assets/js/app-menu.js" type="text/javascript"></script>
  <script src="app-assets/js/app.js" type="text/javascript"></script>
  <script src="app-assets/js/echarts.min.js" type="text/javascript"></script>
</body>

</html>
<script type="module">
  import { addToCart, getCount } from './app-assets/js/cart.js'

  let pageNum = 1;
  let productName = '';
  let supplierName = '';

  //页面加载
  function onladOk(pageNum, productName, supplierName) {
    $.ajax({
      url: 'http://localhost:24080/products',
      type: 'GET',
      dataType: 'JSON',
      data: {
        pageNum: pageNum,
        productName: productName,
        supplierName: supplierName
      },
      success: successLoad
    })
  }
  //总页数
  let pages = 1;
  function successLoad(data) {
    console.log(data)
    if (!data.status) {
      alert(data.message)
    } else {
      pages = data.data.pages;
      data.data.list.forEach(product => {
        let card = `
          <div class="card">
            <img class="card-img-top" src="http://localhost:24080/`+ product.imageUrl + `" alt="Card image cap">
            <div class="card-body">
              <h5 class="card-title">商品名称：`+ product.productName + `</h5>
              <p class="card-text">价格：`+ product.purchasePrice + `</p>
              <p class="card-text">类别：`+ product.categoryName + `</p>
              <p class="card-text">供应商：`+ product.supplierName + `</p>
            </div>
            <div class="card-footer">
              <button type="button" class="btn btn-primary cart"  onclick='addCart(`+ JSON.stringify(product) + `)'>加入购物车</button>
            </div>
          </div>
        
        `;
        $("#cards").append(card);
      });
      selectSupplier();

    }
  }
  //页面加载
  $(function () {
    //页面加载时清空数据
    $("#cards").empty();
    onladOk(1);
    //获取购物车内的商品数量
    let count = getCount();
    $('#num').html(count);
  })


  //查询按钮 模糊查询
  $('#productNameSearch').on('click', function () {
    productName = $('#productNameVal').val();
    //页面加载时清空数据
    $("#cards").empty();
    pageNum = 1;
    onladOk(1, productName, supplierName);
  })


  //供应商查询
  function selectSupplier() {
    $.ajax({
      'url': 'http://localhost:24080/suppliers/list',
      'type': 'get',
      'dataType': 'json',
      success: function (data) {
        $('#supplierNameVal').empty();
        var dataMessage = data.data;
        dataMessage.forEach(function (item) {
          var str = `<li class="list-group-item">${item.supplierName}</li>`;
          $('#supplierNameVal').append(str);
        });
      }
    });
  }


  //通过供应商名称查询对应商品
  $('#supplierNameVal').on('click', 'li', function () {
    $("#cards").empty();
    supplierName = $(this).text();
    onladOk(pageNum, productName, supplierName)
  });




  //鼠标滑轮监控
  $(document).on("mousewheel DOMMouseScroll", function (event) {

    var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
      (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));              // firefox

    // if (delta > 0) {
    // // 向上滚
    //  console.log("up+++++");
    // //do somthing
    // }  
    if (delta < 0) {
      // 向下滚
      console.log("down+++++");
      pageNum += 1;
      if (pageNum <= pages) {
        console.log("获取后台第" + pageNum + "数据");
        onladOk(pageNum);
      } else {
        console.log("已是最后一页");
        //alert('已是最后一页');
      }
      //do somthing
    }
  });




  //添加商品到购物车
  window['addCart'] = function (product) {
    addToCart(product);
    //获取购物车内的商品数量
    let count = getCount();
    $('#num').html(count);
  }
  //展示购物车
  window['showCart'] = function () {
    location.href = '购物车.html'
  }


</script>